<!doctype html>
<html>
<head>
#parse("vm/common/header.html")
<script src="js/highcharts-more.js"></script>
<script src="js/modules/solid-gauge.src.js"></script>
<script>

var type_chart = "bar"; // "column";


$(document).ready(function () {
    $("#ketqua_container").hide();
    //---------init--------------
    //lay danh sach hoc ky

    //---------------------------

});

function report() {
    //hide
    $("#ketqua_container").hide();

    //lay du lieu tu server
    getData();
}

function getData() {
    //call server to get data
    var rqdata = {hocKy : jQuery("#hocKy").val() , khoa:  jQuery("#khoa").val() };
    jQuery.ajax({
        type: "POST",
        url: "giangdaytinhhinhdata1.action?hocKy=" + jQuery("#hocKy").val()
        					+"&khoa=" + jQuery("#khoa").val() ,
        data: {} ,//rqdata,
        contentType: "application/json; charset=utf-8",
        dataType: "json", //dung cai nay thi response phai dung json format, neu khong thi error parseerror
        success: function (response) {
	        var data = response;
	        //process data 

	        if(data!=null){
	        	//view data
	        	viewData(data);
	        }else{
	        	alert("NODATA");
	        }
    	},error: function (xhr, status, error) {
    		alert('ERROR');
            var err = eval("(" + xhr.responseText + ")");
            console.log(err.Message);
        }
    });
}

function viewData(data) {
    var datainfo = createTable(data);
	
  	//---show------
    $("#ketqua_container").show();
  	
  	
    //---draw-chart---
    drawChart(datainfo);
}

function createTable(data) {
	var categories = [];
	var datas = [];
	//----------------------
    //create tbl
    var tblid = "table_container";
    
    var html = '<table id="' + tblid + '" class="table">';
    html+= ' <thead>';
    html+= '    <tr>';
    html+= '      <th></th>';
    html+= '      <th>Số lần</th>';
    html+= '      <th>Phần trăm</th>';
    html+= '    </tr>';
    html+= '  </thead>';
    html+= '  <tbody>';
    
    //{"tongSolan":10000,"dungGio":9000,"somTre":1000,"NDCB":200,"NDKB":100,"DB":250,"CDB":50}
   
    html+= '    <tr>';
    html+= '      <td>' +'Tổng số lần' + '</td>';
    html+= '      <td>' + data.tongSolan + '</td>';
    html+= '      <td>' + (parseInt(data.tongSolan)*100/parseInt(data.tongSolan)).toFixed(2) + '%</td>';
    html+= '    </tr>';
	
    var ptDungGio =  (parseInt(data.dungGio)*100/parseInt(data.tongSolan)).toFixed(2) ;
    html+= '    <tr>';
    html+= '      <td>' +'Đúng giờ' + '</td>';
    html+= '      <td>' + data.dungGio + '</td>';
    html+= '      <td>' + ptDungGio + '%</td>';
    html+= '    </tr>';
    
    var ptSomTre =  (parseInt(data.somTre)*100/parseInt(data.tongSolan)).toFixed(2) ;
    html+= '    <tr>';
    html+= '      <td>' +'Về sớm/ Đi trễ' + '</td>';
    html+= '      <td>' + data.somTre + '</td>';
    html+= '      <td>' + ptSomTre + '%</td>';
    html+= '    </tr>';
    
    var ptNDCoBao =  (parseInt(data.NDCB)*100/parseInt(data.tongSolan)).toFixed(2) ;
    html+= '    <tr>';
    html+= '      <td>' +'Nghỉ dạy có báo' + '</td>';
    html+= '      <td>' + data.NDCB + '</td>';
    html+= '      <td>' + ptNDCoBao + '%</td>';
    html+= '    </tr>';
    
    var ptNDKoBao =  (parseInt(data.NDKB)*100/parseInt(data.tongSolan)).toFixed(2) ;
    html+= '    <tr>';
    html+= '      <td>' +'Nghỉ dạy không báo' + '</td>';
    html+= '      <td>' + data.NDKB + '</td>';
    html+= '      <td>' + ptNDKoBao + '%</td>';
    html+= '    </tr>';
    
    var ptDaDayBu =  (parseInt(data.DB)*100/parseInt(data.tongSolan)).toFixed(2) ;
    html+= '    <tr>';
    html+= '      <td>' +'Đã dạy bù' + '</td>';
    html+= '      <td>' + data.DB + '</td>';
    html+= '      <td>' + ptDaDayBu + '%</td>';
    html+= '    </tr>';
    
    var ptChuaDayBu =  (parseInt(data.CDB)*100/parseInt(data.tongSolan)).toFixed(2) ;
    html+= '    <tr>';
    html+= '      <td>' +'Chưa dạy bù' + '</td>';
    html+= '      <td>' + data.CDB + '</td>';
    html+= '      <td>' + ptChuaDayBu + '%</td>';
    html+= '    </tr>';
    
 
    html+= '  </tbody>';
    html+= '</table>';

    $("#data_container").html(html);
    
    //markup table
    //markup_table();
    
    return {dunggio : parseFloat(ptDungGio),
    		somtre : parseFloat(ptSomTre),
    		ndcobao : parseFloat(ptNDCoBao),
    		ndkobao : parseFloat(ptNDKoBao),
    		dadaybu : parseFloat(ptDaDayBu),
    		chuadaybu : parseFloat(ptChuaDayBu)};
}
function drawChart(datainfo) {
	
	var gaugeOptions = {
        chart: {
            type: 'solidgauge'
        },

        title: null,

        pane: {
            center: ['50%', '85%'],
            size: '110%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            lineWidth: 0,
            minorTickInterval: null,
            tickWidth: 0,
            title: {
                y: -110
            },
            labels: {
                y: 0
            }
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    borderWidth: 0,
                    y: -30,
                    useHTML: true
                }
            }
        }
    };
	
	//============================================
	//chart11 : dung gio
	$('#chart_container11').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
        	stops: [
                    [0.1, '#55BF3B'], // green
                    [0.5, '#DDDF0D'], // yellow
                    [0.9, '#DF5353'] // red
            ],
            min: 0,
            max: 100,
            title: {
                text: 'Đúng giờ'
            }
        },
        title :{
        	text : '$pagename'
        },
        subtitle: {
            text: jQuery("#khoa :selected").text() + " - Học kỳ : " + jQuery("#hocKy :selected").text()
        },
        credits: {
            enabled: false
        },

        series: [{
            name: '%',
            data: [datainfo.dunggio], //data
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span> %' +
                       '</div>'
            }
        }]

    }));
	
	//============================================
	//chart12 : som/tre
	$('#chart_container12').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
        	stops: [
                    [0.1, '#55BF3B'], // green
                    [0.5, '#DDDF0D'], // yellow
                    [0.9, '#DF5353'] // red
            ],
            min: 0,
            max: 100,
            title: {
                text: 'Về sớm/ Đi trễ'
            }
        },
        title :{
        	text : '$pagename'
        },
        subtitle: {
            text: jQuery("#khoa :selected").text() + " - Học kỳ : " + jQuery("#hocKy :selected").text()
        },
        credits: {
            enabled: false
        },

        series: [{
            name: '%',
            data:  [datainfo.somtre], //data
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span> %' +
                       '</div>'
            }
        }]

    }));
	
	//============================================
	//chart21 : nghi day co bao
	$('#chart_container21').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
        	stops: [
                    [0.1, '#55BF3B'], // green
                    [0.5, '#DDDF0D'], // yellow
                    [0.9, '#DF5353'] // red
            ],
            min: 0,
            max: 100,
            title: {
                text: 'Nghỉ dạy có báo'
            }
        },
        title :{
        	text : '$pagename'
        },
        subtitle: {
            text: jQuery("#khoa :selected").text() + " - Học kỳ : " + jQuery("#hocKy :selected").text()
        },
        credits: {
            enabled: false
        },

        series: [{
            name: '%',
            data:  [datainfo.ndcobao], //data
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span> %' +
                       '</div>'
            }
        }]

    }));
	//============================================
	//chart22 : nghi day khong bao
	$('#chart_container22').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
        	stops: [
                    [0.1, '#55BF3B'], // green
                    [0.5, '#DDDF0D'], // yellow
                    [0.9, '#DF5353'] // red
            ],
            min: 0,
            max: 100,
            title: {
                text: 'Nghỉ dạy không báo'
            }
        },
        title :{
        	text : '$pagename'
        },
        subtitle: {
            text: jQuery("#khoa :selected").text() + " - Học kỳ : " + jQuery("#hocKy :selected").text()
        },
        credits: {
            enabled: false
        },

        series: [{
            name: '%',
            data:  [datainfo.ndkobao], //data
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span> %' +
                       '</div>'
            }
        }]

    }));
	
	//============================================
	//chart31 : da day bu
	$('#chart_container31').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
        	stops: [
                    [0.1, '#55BF3B'], // green
                    [0.5, '#DDDF0D'], // yellow
                    [0.9, '#DF5353'] // red
            ],
            min: 0,
            max: 100,
            title: {
                text: 'Đã dạy bù'
            }
        },
        title :{
        	text : '$pagename'
        },
        subtitle: {
            text: jQuery("#khoa :selected").text() + " - Học kỳ : " + jQuery("#hocKy :selected").text()
        },
        credits: {
            enabled: false
        },

        series: [{
            name: '%',
            data:  [datainfo.dadaybu], //data
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span> %' +
                       '</div>'
            }
        }]

    }));
	//============================================
	//chart32 : chua day bu
	$('#chart_container32').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
        	stops: [
                    [0.1, '#55BF3B'], // green
                    [0.5, '#DDDF0D'], // yellow
                    [0.9, '#DF5353'] // red
            ],
            min: 0,
            max: 100,
            title: {
                text: 'Chưa dạy bù'
            }
        },
        title :{
        	text : '$pagename'
        },
        subtitle: {
            text: jQuery("#khoa :selected").text() + " - Học kỳ : " + jQuery("#hocKy :selected").text()
        },
        credits: {
            enabled: false
        },

        series: [{
            name: '%',
            data:  [datainfo.chuadaybu], //data
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span> %' +
                       '</div>'
            }
        }]

    }));
}

function export_excel() {
	var filename = "bc-giangday-1-hk"+ jQuery("#hocKy").val() 
		+ "-" + jQuery("#khoa").val()
		+ ".xls"; 
    tableToExcel('table_container', 'baocao', filename);
}

function markup_table(){
	$('#table_container').bind('dynatable:preinit', function (e, dynatable) {
        dynatable.utility.textTransform.myNewStyle = function (text) {
            return text
             .replace(/\s+/, '_')
             .replace(/[A-Z]/, function ($1) { return $1 + $1 });
        };
    }).dynatable({
        table: {
            defaultColumnIdStyle: 'myNewStyle'
        },
        features: {
            paginate: false,
            search: false,
            recordCount: false,
            perPageSelect: false
        }
    });
}

</script>

</head>
<body>
<!-- tab menu -->
#parse("vm/common/top.html") 

<!-- title page -->
#parse("vm/common/title.html")
<!-- Content ---->
<div class="content_wapper padding">
<div class="container">
<div class="row">

<!-- left menu -->
#parse("vm/common/left-menu.html")

<!-- right content -->
#parse("vm/common/small-title.html")

<div class="sinhvien_wapper" style="">   
    <div>
    <!--filter-->
    <div class="row padding_notop" style="border-bottom: 1px solid #FFFFFF;">
    <div class="hocky-filter col-md-3" >
        <label>Học kỳ</label>
    	<select id="hocKy" class="form-control" name="hocKy">
          <option value="20142">HK2 2014-2015</option>
          <option value="20141">HK1 2014-2015</option>
          
          <option value="20133">HK3 2013-2014</option>
          <option value="20132">HK2 2013-2014</option>
          <option value="20131">HK1 2013-2014</option>
          
          <option value="20123">HK3 2012-2013</option>
          <option value="20122">HK2 2012-2013</option>
          <option value="20121">HK1 2012-2013</option>
          
          <option value="20113">HK3 2011-2012</option>
          <option value="20112">HK2 2011-2012</option>
          <option value="20111">HK1 2011-2012</option>
        </select>
    </div>
    <div class="col-md-1"></div>
    <div class="khoa-filter col-md-4" >
        <label >Khoa</label>
    	<select id="khoa" class="form-control" name="khoa">
        #foreach($t in $listKhoa) 
			<option value="$t.ma">$t.ma - $t.ten</option>
		#end
        </select>
    </div>
    <div class="col-md-3" style="margin-left: 20px;padding-top: 25px;">
        <div class="button" style="width: 120px;" onclick="report()" >Báo cáo</div>
    </div>
    </div>

    <!-------------ketqua-------------->
    <div id="ketqua_container" style="margin-top:10px">

    <!--dulieu-->
    <div >
        <label>Dữ liệu</label>
        <div style="float:right">
            <ul>
                <li>
                    <a style="border-width: 1px;border-color: black;border-style: solid;padding: 2px;" 
                        onclick="export_excel()" href="#">EXCEL</a>
                    <a id="dlink"  style="display:none;"></a>
                </li>
            </ul>
        </div>
    </div>
    
    <div id="data_container">
    </div>
    
    <!--chart-->
    <div>
    <div>
        <label>Biểu đồ</label>
    </div>
    
    <!-- ROW1 -->
    <div class="row padding_notop">
    <div class="col-md-6" >
    	<div id="chart_container11"></div>
    </div>
    <div class="col-md-6" >
    	<div id="chart_container12"></div>
    </div>
    </div>
    
    
    <!-- ROW2 -->
    <div class="row padding_notop">
    <div class="col-md-6" >
    	<div id="chart_container21"></div>
    </div>
    <div class="col-md-6" >
    	<div id="chart_container22"></div>
    </div>
    </div>
    
    <!-- ROW3 -->
    <div class="row">
    <div class="col-md-6" >
    	<div id="chart_container31"></div>
    </div>
    <div class="col-md-6" >
    	<div id="chart_container32"></div>
    </div>
    </div>
    
    <!-- ---------------------- -->
    </div>
    </div>
</div>

</div>


</div>
</div>
</div>
<!-- end Content ---->

<!-- Footer ---->
#parse("vm/common/footer.html")
</body>
</html>